<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
// 导入types/app.ts中的bookItem类型
import { bookItem, Numbric } from './types/app';
import { showToast } from 'vant';
// 导入axios
import http from './utils/http';
import router from './routes/router';
const booksList = ref<bookItem[]>([])

const delBook = (id: Numbric): void => {
  booksList.value = booksList.value.filter((item: bookItem) => item.id !== id)
  // 现在目前有booksList 图书数组，还有一个数组是存单个或多个需要删除图书的id组成的数组
}
const handleDel=()=>{
  booksList.value = booksList.value.filter((item: bookItem) => !isCheckedList.value.includes(item.id))
  showToast('删除成功')
}
const isCheckedList=computed(()=>{
  return booksList.value.filter((item: bookItem) => item.isChecked).map((item: bookItem) => item.id)
})
// 在onMounted生命周期中请求数据
onMounted(async () => {
  // get方法后面需要传入 泛型类型 参数, 当前的get方法是封装之后的方法，如果有参数，直接写在第二个参数的位置，就不需要params
  const res = await http.get<bookItem[]>('/books/queryall')
  booksList.value = res
})
const goToRegister = () => {
  router.push('/register')
}
</script>
<template>
  <div>
    <router-view></router-view>
    <router-link to="/home">home</router-link> |
    <router-link to="/cate">cate</router-link> |
    <button @click="goToRegister()">注册</button>
    <button @click="router.push('/login')">登录</button>
    <hr>
    <ul>
      <li v-for="item in booksList" :key="item.id">
        <input type="checkbox" v-model="item.isChecked">
        {{ item.bookname }}
        <input type="button" value="删除" @click="delBook(item.id)">
      </li>
    </ul>
    <button @click="handleDel">删除已选</button>
  </div>

</template>

<style scoped></style>
